// import React from 'react'
import { Button, Layout, Menu } from 'antd';
import { LeftOutlined, SyncOutlined } from '@ant-design/icons';
// import SideMenu from '../SideMenu'
// import { useSelector } from 'react-redux'
// import { Outlet } from 'react-router-dom'


import React, { useEffect, useState } from 'react'
// import { Menu } from 'antd';
import { Link, useNavigate, Outlet } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { setCurrentPageName } from '../../../store/home/homeSlice'

const { Content, Sider } = Layout;


function SiderMenu() {
    const navigate = useNavigate()
    const state = useSelector(state => state)
    const dispatch = useDispatch()
    const routes = state.menuNav.routes
    const items = []
    let defaultName = ''
    let currentName = ''

    // 设置items
    state.menuNav.sideNav.map(item => {
        if (item.children && item.children.length > 0) {
            items.push({
                key: item.id,
                label: item.menuName,
                children: (() => {
                    return item.children.map(chilItem => {
                        return {
                            key: chilItem.id,
                            label: <Link to={chilItem.pathRoute}>{chilItem.menuName}</Link>
                        }
                    })
                })()
            })
        } else {
            items.push({
                key: item.id,
                label: item.menuName
            })
        }

    })
    useEffect(() => {
        // console.log(state.menuNav.sideNav);
        // 设置items
        state.menuNav.sideNav.map(item => {
            if (item.children && item.children.length > 0) {
                items.push({
                    key: item.id,
                    label: item.menuName,
                    children: (() => {
                        return item.children.map(chilItem => {
                            return {
                                key: chilItem.id,
                                label: <Link to={chilItem.pathRoute}>{chilItem.menuName}</Link>
                            }
                        })
                    })()
                })
            } else {
                items.push({
                    key: item.id,
                    label: item.menuName
                })
            }

        })


    }, [])
    defaultName = items[0] ? items[0].label : ''
    // console.log(defaultName);

    function bindMenu(menuList) {
        let arr = []
        menuList.map(item => {
            if (item.children && item.children.length > 0) {
                arr.push({
                    key: item.id,
                    label: item.menuName,
                    children: [...bindMenu(item.children)]
                })
            } else {
                arr.push({
                    key: item.id,
                    label: <Link to={item.menuUrl}>{item.menuName}</Link>
                })
            }
        })
        return arr
    }


    // 默认key
    const [defaultKey, setDefaultKey] = useState({ selected: [''], open: [''] })
    // 当前key
    const [currentKey, setCurrentKey] = useState({ selected: [''], open: [''] })
    const defaultNav = state.menuNav.defaultSideNav

    function currentNav(arr, id) {
        let newArr = []
        let temp = ''
        arr.map((item) => {
            temp = item[0].key + ''
            if (temp[0] === id) {
                newArr.push(...item)
            }
        })
        return newArr
    }

    useEffect(() => {
        // console.log(items);
        setDefaultKey(defaultNav)
        setCurrentKey({ ...defaultNav })

        if (routes.length > 0 && defaultNav.selected) {
            for (let i = 0; i < routes.length; i++) {
                for (let j = 0; j < defaultNav.selected.length; j++) {
                    if ((routes[i].id + '') === (defaultNav.selected[j])) {
                        dispatch(setCurrentPageName(routes[i].id))
                        // navigate(routes[i].path)
                    }
                }
            }
        }

    }, [state.menuNav.currentTopNav])




    // console.log('------SideMenu-------');

    return (
        <>
            <Menu
                theme="dark"
                mode="inline"
                // defaultOpenKeys={['11']}
                // defaultSelectedKeys={['111']}
                // defaultSelectedKeys={[defaultKey.selected]}
                // openKeys={currentKey.open}
                // selectedKeys={currentKey.selected}
                onOpenChange={(openKeys) => {
                    setCurrentKey({ ...currentKey, open: [...openKeys] })

                }}
                onSelect={(selectKeys) => {
                    for (let i = 0; i < currentKey.open.length; i++) {
                        if (selectKeys.keyPath[1][0] === currentKey.open[i][0]) {
                            const temp = [...currentKey.selected]
                            for (let j = 0; j < temp.length; j++) {
                                if (selectKeys.key[0] === temp[j][0]) {
                                    dispatch(setCurrentPageName(selectKeys.key))
                                    // console.log();
                                    temp[j] = selectKeys.key
                                    break
                                }
                            }
                            setCurrentKey({ ...currentKey, selected: temp })
                        }
                    }

                }}
                items={items}
                style={{
                    height: '100%',
                    borderRight: 0,
                    borderTop: '1px solid #f0f2f5'
                }}
            />
        </>
    )
}


export default function Main() {
    const state = useSelector(state => state)

    let pageName = state.menuNav.currentPageName ? state.menuNav.currentPageName : ''

    return (
        <>
            <Sider width={200} className="site-layout-background">
                {/* <SideMenu /> */}
                {SiderMenu()}
            </Sider>
            <Layout style={{ padding: '0 24px 24px', }}>
                <div className='headerTitle'>
                    <div>
                        <div style={{
                            display: 'inline-block',
                            width: '4px',
                            height: '100%',
                            backgroundColor: '#1abc9c',
                            verticalAlign: 'middle',
                            marginRight: '10px'
                        }}></div>
                        {pageName}
                    </div>
                    <div className='rightBtn'>
                        {false ? <Button type='default'><LeftOutlined />返回</Button> : ''}
                        <Button type='default' onClick={() => { window.location = 'http://localhost:3000/home' }}><SyncOutlined />刷新</Button>
                    </div>
                </div>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                    }}
                >
                    <Outlet />
                </Content>
            </Layout>
        </>
    )
}
